<template>
    <div class="sidebar-box" :class="{ 'is-collapse': keyCollapse }">
        <el-scrollbar>
            <el-menu
                unique-opened
                :default-active="toIndex"
                mode="vertical"
                :show-timeout="200"
                :collapse="keyCollapse"
            >
                <SiderBarItem :menu="menuList" first :collapse="keyCollapse"></SiderBarItem>
            </el-menu>
        </el-scrollbar>

        <!-- :active-text-color="variables['menu-active-text']" -->
        <!-- <div class="sidebar-footer ht-40 fx-bt-ct bd-e7-tp" :class="{ 'is-collapse': keyCollapse }">
            <div class="collapse-btn ic-16 cs-pt"></div>
        </div> -->
    </div>
</template>
<script lang="ts" setup>
import SiderBarItem from './siderBarItem.vue';
import { useMenuStoreHook } from '@/stores/user/menu';
import { useRoute } from 'vue-router';
const menuList = useMenuStoreHook().menuList;
const route = useRoute();
const keyCollapse = ref(false);
const toIndex = computed(() => route.path);
onMounted(() => {});
</script>

<style lang="scss" scoped></style>
